<template>
    <el-dialog destroy-on-close :before-close="closeDialog" v-model="state.dialog.isShowDialog" :title="state.dialog.title"
        width="70%">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="system-dialog-search mb15">
                <span class="p_el_input">工号：<el-input size="default" v-model="state.param.code" placeholder="请输入工号"
                        clearable />
                </span>
                <span class="p_el_input">姓名：<el-input size="default" v-model="state.param.name" placeholder="请输入姓名"
                        clearable />
                </span>
                <el-button size="default" round type="primary" class="ml10" @click="getTableData">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" round type="success" class="ml10" @click="submitOn">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    确认
                </el-button>
            </div>
            <el-table border :data="state.content.employeeList" @selection-change="selectedChange"
                v-loading="state.dialog.loading" style="width: 100%" ref="tableRef">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column label="工号" prop="code"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="部门" prop="org.name"></el-table-column>
                <el-table-column label="角色" prop="role.name"></el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 50, 200, 800]" v-model:current-page="state.param.pageNum" background
                v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="state.param.total">
            </el-pagination>
        </el-card>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { usePersonEmployeePageApi } from '/@/api/person/employee';
import { useAccessRuleAddEmployeeApi } from '/@/api/access/rule';
import { useAttendRuleAddEmployeeApi } from '/@/api/attend/rule';

// 定义变量内容
const emit = defineEmits(['refresh'])
const tableRef = ref()
const state = reactive({
    // 表格数据
    content: {
        employeeList: []
    },
    // 弹窗信息
    dialog: {
        isShowDialog: false,
        type: 0,
        title: '',
        loading: false,
    },
    // 表单提交
    formData: {
        code: '',
        codeList: [] as any
    },
    // 查询参数
    param: {
        code: '',
        name: '',
        pageNum: 1,
        pageSize: 10,
        total: 1
    }
})

// 初始化表格数据
const getTableData = () => {
    state.dialog.loading = true
    usePersonEmployeePageApi(state.param).then(({ content }) => {
        state.content.employeeList = content.list
        state.param.total = content.total
        state.param.pageNum = content.pageNum
        state.param.pageSize = content.pageSize
    }).then(() => {
        state.dialog.loading = false
    }).catch(() => {
        ElMessage.error('查询失败')
    })
}

// 分页改变
const onHandleSizeChange = (val: number) => {
    state.param.pageSize = val;
    getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.param.pageNum = val;
    getTableData();
};

// 选中表格数据
const selectedChange = (codes: any) => {
    state.formData.codeList = []
    codes.forEach((item: { code: string; }) => {
        state.formData.codeList.push(item.code)
    })
}

// 添加人员
const submitOn = () => {
    ElMessageBox.confirm(
        `是否关联选中人员到权限组`,
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        useAttendRuleAddEmployeeApi({ code: state.formData.code, codeList: state.formData.codeList }).then(() => {
            ElMessage({
                type: 'success',
                message: '关联人员成功'
            })
        })
    }).then(() => {
        getTableData()
        closeDialog()
    })
}

// 打开dialog
const openDialog = (row: { code: string; name: string }) => {
    state.formData.code = row.code
    state.dialog.title = `新增${row.name}关联`
    state.dialog.isShowDialog = true
    getTableData()
}
const closeDialog = () => {
    emit('refresh')
    state.dialog.isShowDialog = false
}

// 暴露变量
defineExpose({
    openDialog
})


</script>

<style lang="scss" scoped></style>